<template lang="">
    <div>
        <!-- <Test/>
        <test2/>
        <Test3/> -->
        <!-- <h1>学校名：{{studentName}}</h1> -->
        <!-- <img src="./assets/logo.png" alt="logo"> -->
        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用@或v-on） -->
        <!-- <School @atguigu='getStudentName'/> -->
        <!-- v-on的写法 -->
        <!-- <School v-on:atguigu='getStudentName'/> -->
        <!-- once: 只调用一次 -->
        <!-- <School @atguigu.once='getStudentName'/> -->

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用ref） -->
        <!-- <School ref='school'></School> -->
        <!-- 在属性前加‘：’表示后面可以使用表达式 -->
        <!-- <Student name="张三" sex="男" :age="24"></Student>
        <MyHeader :addTodo="addTodo"/> -->
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <!-- <MyList :todos="todos" :checkTodo="checkTodo" :remove="remove"/>
        <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/> -->
        <div class="container">
           <Category>
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"/>
        </Category>
        <Category>
            <ul>
                <li v-for="(item,index) in games" :key="index">{{item}}</li>
            </ul>
        </Category>
        <Category>
            <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
        </Category> 
        </div>
        
    </div>
</template>
<script>
    // 引入组件
    // import School from '@/components/School'
    // import Student from '@/components/Student'
    // import MyHeader from '@/components/MyHeader'
    // import MyList from '@/components/MyList'
    // import MyFooter from '@/components/MyFooter'
    // import Test from '@/components/Test'
    // import Test2 from '@/components/Test2'
    // import Test3 from '@/components/Test3'
    import Category from '@/components/Category'

// 导出
    export default {
        name: 'App',
        components: {
            // School,
            // Student,
            // MyList,
            // MyHeader,
            // MyFooter,
            // Test,
            // Test2,
            // Test3,
            Category,
        },
        data() {
            return {
                // 当缓存中没有数据是就会拿后面的空数组
                todos: JSON.parse(localStorage.getItem('todos')) || [],
                studentName: '',
                foods:['火锅','烧烤','小龙虾','牛排'],
                games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films: ['《教父》','《拆弹专家》','《你好，李焕英》','《港硅谷》']
            }
        },
        computed: {
            total() {
                return this.todos.length
            }
        },
        methods: {
            // 更新一个todo
            updateTodo(id,title){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.title = title
                })
            },
            addTodo(todoObj) {
                this.todos.unshift(todoObj)
            },
            // 是否选中（多选框）
            checkTodo(id) {
                this.todos.forEach(e => {
                    if(e.id === id) e.done = !e.done;
                });
            },
            checkAllTodo(done) {
                this.todos.forEach((todo) => {
                    todo.done = done
                })
            },
            clearAllTodo() {
                this.todos = this.todos.filter((todo) => {
                    return !todo.done
                })
            },
            remove(id) {
               this.todos = this.todos.filter(todo =>todo.id !== id)
            },
            getSchoolName(name,...params) {
                console.log('App收到了学生名',name,params);
                this.studentName = name;
            }
        },
        mounted() {
            /**
             * this.$refs.school.$on('atguigu',this.getSchoolName);
             * 下面为简写形式，如果不想在methos中写方法就必须用箭头函数；否则this指向会指向到school
             */
            this.$refs.school.$on('atguigu',(name,...params)=>{
                console.log('App收到了学生名',name,params);
                this.studentName = name;
            }) // 绑定自定义事件

            this.$bus.$on('updateTodo',this.updateTodo)
        },
        watch: {
            todos: {
                deep: true,
                handler(value) {
                    localStorage.setItem('todos',JSON.stringify(value))
                }
            }
        }
}
</script>
<style scoped>
    .container {
        display: flex;
        justify-content: space-around;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
        width: 100%;
    }
    img {
        width: 100%;
    }
</style>